// 普通的Callback Hell
function loadImg(src,callback,fail) { 
    var img=document.createElement('img');
    img.onload=function(){
        callback(img);
    }
    img.onerror=function(){
        fail();
    }
    img.src=src;
}
var src='../../../../images/logo (1).png';
loadImg(src,function(img){
    console.log("success:"+img.width);
},function(){
    console.log("加载失败")
})

// ES6 Promise
// 一个Promise就是代表着一个异步操作最终完成或者失败的对象
// Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。
function loadImg2(src){
    return new Promise((resolve,reject)=>{
        let img=document.createElement('img');
        img.onload=function(){
            resolve(img);
        };
        img.onerror=function(e){
            // 返回错误信息
            reject("catch 错误 加载失败")
        }
        img.src=src;
    })
}
var src='../../../../images/logo (1).png';
loadImg2(src).then(img=>{
    console.log(img.width);
    return img
}).then(img=>{
    console.log(img.height);
}).catch(ex=>{
    // 统一捕获异常
    console.log(ex)
})

// then(successCallback,failureCallback) 只传入一个回调函数代表successCallback
// then里的参数是可选的，catch(failureCallback) 是 then(null, failureCallback) 的缩略形式。
// 如果想要在下一个then的回调中获取上个promise中的结果，上个promise中必须要返回结果。
// 在一个失败操作（即一个 catch）之后可以继续使用链式操作，
// 即使链式中的一个动作失败之后还能有助于新的动作继续完成